<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="../css/main.css" />
    <noscript><link rel="stylesheet" href="../css/noscript.css" /></noscript>
</head>
<body>

<div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#Catalog").hide().fadeIn();
        });
    </script>
</div>
    <div id="Catalog">
<!--        <div id="Content">-->
<!--            <th:if test="${sessionScope.messageSignOn != null}">-->
<!--                <ul class="message">-->
<!--                    <li></li>-->
<!--                </ul>-->
<!--            </th:if>-->
<!--        </div>-->
        <div th:replace="common/top">
        </div>

        <form action="#" th:action="@{/account/signon}" th:object="${account}" method="post">
            <br>
            <br>
            <br>
            <p>Please enter your username and password.</p>

            <table>
                <tr>
                    <td>Username:</td>
                    <td>
                        <input class="input-sign" id="username" type="text" name="username" placeholder="Username" th:field="*{username}" >
                        <div id="usernameInfo"></div>
                    </td>
                </tr>
                <tr>
                    <td>Password:</td>
                    <td><input class="input-sign" id="password" type="password" name="password" placeholder="Password" th:field="*{password}"></td>
                </tr>
                <tr>
                    <td>VerificationCode:</td>
                    <td><input class="input-sign" type="text" name="vCode" size="5" maxlength="6" placeholder="VerificationCode"></td>
                    <td>
                        <a href="#" onclick="checkcode()"><img id="code" border="0" src="/account/verificationCode" name="code"></a>
                        <script type="text/javascript">
                            function checkcode(){
                                document.getElementById("code").src=document
                                    .getElementById("code").src + "?nocache="+ new Date().getTime();
                            }
                        </script>
<!--                        <input class="input-sign" type="text" name="vCode" size="5" maxlength="6" placeholder="VerificationCode"/>-->
<!--                        <a href="newAccount"><img border="0" src="verificationCode" name="checkcode"></a>-->
                    </td>
                </tr>
<!--                <tr>-->
<!--                    <td>VerificationCode:</td>-->
<!--                    <td><input type="text" name="vCode" size="20" maxlength="4"></td>-->
<!--                    <td>-->
<!--                        <a href="#" onclick="checkcode()"><img id="code" border="0" src="verificationCode" name="code"></a>-->
<!--                        <script type="text/javascript">-->
<!--                            function checkcode(){-->
<!--                                document.getElementById("code").src=document-->
<!--                                    .getElementById("code").src + "?nocache="+ new Date().getTime();-->
<!--                            }-->
<!--                        </script>-->
<!--                    </td>-->

<!--                </tr>-->
<!--                <tr>-->
<!--                    <td colspan="2" align="right">-->
<!--                        <font color="#FF6984">${requestScope.msg}</font>-->
<!--                    </td>-->
<!--                </tr>-->
                <tr>
                    <td colspan="2" align="right">
                        <font color="#FF6984" th:text="${msg}">${requestScope.msg}</font>
                    </td>
                </tr>
            </table>
<!--            <div style="text-align:center;vertical-align:middle;"><input type="submit" name="signon" value="Login"></div>-->
            <input type="submit" name="/account/signon" value="Login">
            <a type="button" href="/account/SMSLogin" >短信登录</a>
        </form>

        Need a user name and password? <a href="newAccountForm">Register Now!</a>
        <div th:replace="common/bottom">

        </div>
    </div>

</body>
</html>